import React, {
  ReactNode,
  useContext,
  useState,
  FunctionComponentElement,
} from 'react';
import classNames from 'classnames';
import Icon from '../Icon/Icon';
import { MenuContext } from './menu';
import Transition from '../Transition';
export interface SubMenuProps {
  /** 标题 */
  title?: string;
  /** 下标 */
  index?: number | string;
  /** 子元素 */
  children?: ReactNode;
  className?: string;
}
// const SubMenu: React.FC<SubMenuProps> = (props) => {
//   const { children, title, index } = props;
//   const context = useContext(MenuContext);

//   const classes = classNames('mid-menu-item', 'submenu-item', {
//     'mid-submenu-active': false,
//     'is-opened': context.index === index,
//     'is-vertical': context.mode === 'vertical',
//   });

//   const renderChild = () => {
//     const subMenuClasses = classNames('mid-submenu', {
//       'menu-opened': context.index === index,
//     });
//     const render = React.Children.map(children, (child, i) => {
//       const childComponet = child as React.FunctionComponentElement<
//         SubMenuProps
//       >;
//       if (childComponet.type.name === 'MenuItem') {
//         return React.cloneElement(childComponet, { index: `${index}-${i}` });
//       }
//       console.error('Warning: Menu has a child which is not a MenuItem');
//     });
//     return (
//       <Transition in={menuOpen} timeout={300} animation="zoom-in-top">
//         <ul className={subMenuClasses}>{childrenComponent}</ul>
//       </Transition>
//     );
//   };

//   const handleClick = () => {
//     context.selectedFn!(index as number);
//   };

//   return (
//     <div key={index} className={classes} onClick={handleClick}>
//       <div className="submenu-title">
//         {title}
//         <Icon name="angle-down" className="arrow-icon" />
//       </div>
//       {renderChild()}
//     </div>
//   );
// };

// export default SubMenu;

const SubMenu: React.FC<SubMenuProps> = ({
  index,
  title,
  children,
  className,
}) => {
  const context = useContext(MenuContext);
  const openedSubMenus = context.defaultOpenSubMenus as Array<string>;
  const isOpend =
    index && context.mode === 'vertical'
      ? openedSubMenus.includes(index as string)
      : false;
  const [menuOpen, setOpen] = useState(isOpend);
  const classes = classNames('mid-menu-item', 'submenu-item', className, {
    'is-active': context.index === index,
    'is-opened': menuOpen,
    'is-vertical': context.mode === 'vertical',
  });
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
    setOpen(!menuOpen);
  };
  const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
    e.preventDefault();
    setOpen(toggle);
  };
  const clickEvents =
    context.mode === 'vertical'
      ? {
          onClick: handleClick,
        }
      : {};
  const hoverEvents =
    context.mode !== 'vertical'
      ? {
          onMouseEnter: (e: React.MouseEvent) => {
            handleMouse(e, true);
          },
          onMouseLeave: (e: React.MouseEvent) => {
            handleMouse(e, false);
          },
        }
      : {};
  const renderChildren = () => {
    const subMenuClasses = classNames('mid-submenu', {
      'menu-opened': menuOpen,
    });
    const childrenComponent = React.Children.map(children, (child, i) => {
      const childElement = child as FunctionComponentElement<SubMenuProps>;
      if (childElement.type.name === 'MenuItem') {
        return React.cloneElement(childElement, {
          index: `${index}-${i}`,
        });
      } else {
        console.error(
          'Warning: SubMenu has a child which is not a MenuItem component',
        );
      }
    });
    return (
      <Transition in={menuOpen} timeout={300} animation="zoom-in-top">
        <ul className={subMenuClasses}>{childrenComponent}</ul>
      </Transition>
    );
  };
  return (
    <li key={index} className={classes} {...hoverEvents}>
      <div className="submenu-title" {...clickEvents}>
        {title}
        <Icon name="angle-down" className="arrow-icon" />
      </div>
      {renderChildren()}
    </li>
  );
};

export default SubMenu;
